<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <a-col :span="24">
          <a-card>
            <div class="mb-20">
              <!-- 查询参数 -->
              <pro-query
                :searchParam="searchParams.params"
                @on-search ="search"
              ></pro-query>
            </div>
            <pro-table
              ref="tableRef"
              :fetch="fetch"
              :columns="columns"
              :operate="operate"
              :param="state.param"
              :toolbar="toolbar"
              :pagination="pagination"
              :operationWidth="operationWidth"
            >
            </pro-table>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
</template>
<script>
export default {
  name: "message-manage-list"
}
</script>
<script setup>
import { btnIsPowerByCode, filterEmptyByObject } from '@/tools/common'
import { page } from "@/api/module/message";
import {onMounted, reactive, ref } from "vue";
import {useRouter} from "vue-router";
import { getDictByCodesReturnObj } from '@/tools/get-dict'
import dictEnum from '@/const/dict'
import { useI18n } from 'vue-i18n'
import moment from "moment";

const pagination = {
  pageNum: 1,
  pageSize: 10,
}
const operationWidth = 200
const router = useRouter()
const { t } = useI18n()
const tableRef = ref()

let dictLists = reactive({
  data: {}
})

let searchParams = reactive({
  params: []
})

onMounted(async () => {
  dictLists.data = await getDictByCodesReturnObj([
    dictEnum.MESSAGE_TYPE,
    dictEnum.MESSAGE_STATE,
  ])

  searchParams.params = [
    {
      key: "coverType",
      type: "select",
      label: t('message-manage.title.messageLabel'),
      placeholder: t('message-manage.placeholder.pleaseEnter'),
      options: dictLists.data[dictEnum.MESSAGE_TYPE]
    },
    {
      key: "title",
      type: "input",
      label: t('message-manage.title.title'),
      placeholder: t('message-manage.placeholder.pleaseEnter')
    },
    {
      key: "createBy",
      type: "input",
      label: t('message-manage.title.createBy'),
      placeholder: t('message-manage.placeholder.pleaseEnter')
    },
    {
      key: "releaseTime",
      type: "rangeTime",
      label: t('message-manage.title.releaseTime'),
      hidden: true,
      showTime: {
        format: 'YYYY-MM-DD HH:mm:ss'
      },
      placeholder: ['选择开始时间', '选择结束时间']
    },
    {
      key: "post",
      type: "select",
      label: t('message-manage.title.status'),
      placeholder: t('message-manage.placeholder.pleaseSelect'),
      options: dictLists.data[dictEnum.MESSAGE_STATE],
      hidden: true
    },
  ]
})

const fetch = async (param) => {
  let response = await page(param);
  return {
    data: response.data.record,
    total: response.data.total
  };
};

const search = (value) => {
  state.param = {
    ...state.param,
    ...filterEmptyByObject(value),
    stateReleaseTime: value.releaseTime ? moment(value.releaseTime[0]).valueOf() : undefined,
    endReleaseTime: value.releaseTime ? moment(value.releaseTime[1]).valueOf() : undefined,
  }
  delete state.param.releaseTime
}

const toolbar = [
  {
    code: 'message-manage-list:add',
    label: '新增',
    type: 'primary',
    event: (selectedRowKeys) => {
      gotoPage()
    }
  },
  // {
  //   code: '',
  //   label: '批量导入',
  //   type: '',
  //   event: (selectedRowKeys) => {
  //     handleExport()
  //   }
  // },
]

const columns = [
  {
    dataIndex: "coverType",
    key: "coverType",
    title: t('message-manage.title.messageLabel'),
    cellRender: (record, data) => {
      if (dictLists.data[dictEnum.MESSAGE_TYPE]) {
        const item = dictLists.data[dictEnum.MESSAGE_TYPE].find(v => v.value == data)
        return item ? item.label : ''
      }
      return ''
    }
  },
  { dataIndex: "title", key: "title", title: t('message-manage.title.title') },
  {
    dataIndex: "address",
    key: "address",
    title: t('message-manage.title.status'),
    cellRender: (record, data) => {
      if (dictLists.data[dictEnum.MESSAGE_STATE]) {
        const item = dictLists.data[dictEnum.MESSAGE_STATE].find(v => v.value == data)
        return item ? item.label : ''
      }
      return ''
    }
  },
  { dataIndex: "createBy", key: "createBy", title: t('message-manage.title.createBy') },
  { dataIndex: "createTime", key: "createTime", title: t('message-manage.title.createTime') },
]

const operate = [
  {
    label: t('button.detail'),
    event: (record) => {
      router.push({
        path: '/university/message-manage/detail',
        query: {
          id: record.id
        }
      })
    }
  },
  { label: t('button.upperShelf') },
  { label: t('button.lowerShelf') },
];

const state = reactive({
  selectedRowKeys: [],
  param: {},
  visibleSave: false,
  visibleEdit: false,
  visibleInfo: false,
  recordEdit: {},
  recordInfo: {},
})

const handleExport = () => {}

const onSelectChange = selectedRowKeys => {
  state.selectedRowKeys = selectedRowKeys;
};

const gotoPage = () => {
  router.push('/university/message-manage/add')
}
</script>

<style scoped>

</style>
